<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8" />
    <link rel="stylesheet" type="text/css" href="https://res.kuoqps.com/kuoqi-ui/web.dev.css">
    <title>table测试</title>
    <script src="../../kq.1.06/kq.1.06.dev.js"></script>
    <script type="text/javascript" src="kq.table.js"></script>
    <style>
    .active{
		background-color: #3368a2;
    	color: #fff;
	}
    </style>
</head>

<body>
<div id="table"></div>
<script>
var table = new $Q.plugIn.table({
	box:'#table',//盒子元素
	classname:'table table-toggle',//配置classname
	headOptions:{
		style:'color:#dd0',	
	},
	//分页的相关参数的配置
	usePager:true,//是否启用分页效果
	pagerOptions:{
		pageSize:11,//当前每个分页的数据量
		count:1000,//总的数据量信息
		//pager:1,//当前的页码信息
		classname:'pager',//给最外层的一个额定的classname
		showTablen:4,//展示tab的数量
	},
	//数据源相关配置，如果配置这个数据参数信息之后，将自动获取分页数据源
	//数据源配置
	useDataer:true,//是否启用自带的数据源配置，启动之后
	//本模块会让【pagerOptions】参数成为一个工具函数
	dataerOptions:{
		url:'http://api.kuoqps.cn/Exams/ItemPaginate',//接口地址
		//额外的请求数据信息
		data:{
			app_key:'a3EyMTEyMjg1MjkyOmJmYzI2MTFlYWVkMDNkNzlmZDg1YTcxYWQxNjQxNDFlNmQxMjA0Y2Y='	
		},
		//这里自定义同步数据信息
		success:function(rs){	
			if(rs.status==1){
				var data = rs.data;
				this.top.setAllcount(rs.data.totalCount);//设置总条数
				this.top.setPager(rs.data.pageNow);//设置当前的页面信息
				this.top.setRows(rs.data.data);//追加条目信息进入到表格中
				this.syncUI();//执行UI渲染
			}
		},
	},
	cols:[
		{
			title:'ID',	//对外显示的名称
			name:'id',//对应的字段名称
		},
		{
			title:'题型',	//对外显示的名称
			name:'type',//对应的字段名称
			type:'select',//字段类型
			type_name:'id',//类型名称
			type_code:'name',//类型字段
			//头部的相关参数的定义
			headOptions:{
				width:88,
			},
			select:[
				{id:1,name:'单选'},
				{id:2,name:'多选'},
			]
		},	
		{
			title:'标题',	//对外显示的名称
			name:'title',//对应的字段名称
		},
		{
			title:'测试',	//对外显示的名称
			name:'',//对应的字段名称
			value:'定值',//对应的字段的值
			//配置一些常规的参数
			options:{
				classname:'label label-small label-red',//里面元素的classname
			},
			classname:'text-c',//给当前的td标签配置的属性classname值
			type:'',//字段类型，默认text
		},
		{
			title:'操作',
			classname:'text-c',
			value:function(row){
				return '<a class="btn btn-small btn-add" data-id="'+row.id+'">编辑</a>';
			},
		},
	],
	data:[],
});
console.log(table);
</script>
</body>
</html>
